<template>
  <div class="messagetemplate">
    <!-- 查询 -->
    <el-form ref="form" :model="form" size="mini">
      <!-- 会员查询条件 -->
      <div style="display:flex;margin:0 0 15px 0">
        <el-form-item label="模板名称" style="display:flex;margin:0 50px 0 0">
          <el-input v-model="form.templateName" style="width:400px;" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" style="display: flex; margin: 0 20px 0 0">
          <el-date-picker type="date" v-model="form.createDate" value-format="yyyy-MM-dd" placeholder="创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="-" style="display: flex; margin: 0 20px 0 0">
          <el-date-picker type="date" v-model="form.createTimeBack" value-format="yyyy-MM-dd" placeholder="创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="querybutton">查询</el-button>
          <el-button type="primary" @click="message">新增</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" :data="Querydata" border stripe>
      <el-table-column label="发送方式" prop="sendMeans" width="160px"></el-table-column>
      <el-table-column label="模板类型" prop="templateType" width="110px">
        <!-- <template slot-scope="scope">
          <template v-if="scope.row.changetype=='1'">增加</template>
          <template v-if="scope.row.changetype=='2'">减少</template>
        </template> -->
      </el-table-column>
      <el-table-column label="模板名称" prop="templateName" width="120px"></el-table-column>
      <el-table-column label="模板内容" prop="templateName" width="90px"></el-table-column>
      <el-table-column label="状态" prop="status" width="110px">
        <!-- <template slot-scope="scope">
          <template v-if="scope.row.businessType=='hotel'">酒店</template>
          <template v-if="scope.row.businessType=='flight'">机票</template>
          <template v-if="scope.row.businessType=='service'">贵宾厅</template>
          <template v-if="scope.row.businessType=='train'">火车票</template>
          <template v-if="scope.row.businessType=='VIPAisle'">vip通道</template>
          <template v-if="scope.row.businessType=='checkIn'">值机</template>
          <template v-if="scope.row.businessType=='customer'">会员</template>
        </template> -->
      </el-table-column>
      <el-table-column label="业务类型" prop="busType" width="90px">
        <template slot-scope="scope">
          <template v-if="scope.row.busType=='hotel'">酒店</template>
          <template v-if="scope.row.busType=='flight'">机票</template>
          <template v-if="scope.row.busType=='service'">贵宾厅</template>
          <template v-if="scope.row.busType=='train'">火车票</template>
          <template v-if="scope.row.busType=='VIPAisle'">vip通道</template>
          <template v-if="scope.row.busType=='checkIn'">值机</template>
          <template v-if="scope.row.busType=='customer'">会员</template>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="creationTime"></el-table-column>
      <el-table-column label="员工姓名" prop="employeeName" width="90px"></el-table-column>
      <!-- <el-table-column label="是否删除" prop="isDelete" width="90px"></el-table-column> -->
      <!-- <el-table-column label="是否审核" prop="state">
        <template slot-scope="scope">
          <template v-if="scope.row.state=='true'">是</template>
          <template v-if="scope.row.state=='false'">否</template>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="160px">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="primary" @click="messageModify (scope.row)">修改</el-button> -->
          <el-button size="mini" type="primary" @click="messagedelete (scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
    <!-- 新增 -->
    <el-dialog :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
      <el-form :model="ruleForm" :rules="rules" size="mini" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div style="display:flex;margin:0 0 15px 0">
          <el-form-item label="发送方式" prop="waysend">
            <el-select style="width:180px" v-model="ruleForm.waysend" placeholder="请选择活动区域">
              <el-option label="酒店" value="hotel"></el-option>
              <el-option label="机票" value="flight"></el-option>
              <el-option label="贵宾厅" value="service"></el-option>
              <el-option label="火车票" value="train"></el-option>
              <el-option label="vip通道" value="VIPAisle"></el-option>
              <el-option label="值机" value="checkIn"></el-option>
              <el-option label="会员" value="customer"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板类型" prop="templatetype">
            <el-select style="width:180px" v-model="ruleForm.templatetype" placeholder="请选择活动区域">
              <el-option label="酒店" value="hotel"></el-option>
              <el-option label="机票" value="flight"></el-option>
              <el-option label="贵宾厅" value="service"></el-option>
              <el-option label="火车票" value="train"></el-option>
              <el-option label="vip通道" value="VIPAisle"></el-option>
              <el-option label="值机" value="checkIn"></el-option>
              <el-option label="会员" value="customer"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;margin:0 0 15px 0">
          <el-form-item label="业务类型" prop="businesstypes">
            <el-select style="width:180px" v-model="ruleForm.businesstypes" placeholder="请选择活动区域">
              <el-option label="酒店" value="hotel"></el-option>
              <el-option label="机票" value="flight"></el-option>
              <el-option label="贵宾厅" value="service"></el-option>
              <el-option label="火车票" value="train"></el-option>
              <el-option label="vip通道" value="VIPAisle"></el-option>
              <el-option label="值机" value="checkIn"></el-option>
              <el-option label="会员" value="customer"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select style="width:180px" v-model="ruleForm.state" placeholder="请选择活动区域">
              <el-option label="是" value='true'></el-option>
              <el-option label="否" value='false'></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;margin:0 0 15px 0">
          <el-form-item label="模板名称" prop="templateName">
            <el-input type="textarea" :rows="1" style="width:500px;" v-model="ruleForm.templateName"></el-input>
          </el-form-item>
        </div>
        <div style="display:flex;margin:0 0 15px 0">
          <el-form-item label="模板内容" prop="templatecontent">
            <el-input type="textarea" style="width:500px;" :rows="2" v-model="ruleForm.templatecontent"></el-input>
          </el-form-item>
        </div>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="确认删除当前数据吗" :visible.sync="dialogVisibleremove" width="20%" :close-on-click-modal="false">
      <el-button size="mini" type="primary" @click="submitFormremove">确定</el-button>
      <el-button size="mini" @click="dialogVisibleremove=false">取消</el-button>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'messagetemplate',
    data() {
      return {
        smsTemplateId: "",
        // 删除
        dialogVisibleremove: false,
        // 新增表单
        ruleForm: {
          // 发送方式
          waysend: "",
          // 模板类型
          templatetype: "",
          // 业务类型
          businesstypes: "",
          // 状态
          state: "",
          // 模板名称
          templateName: "",
          // 模板内容
          templatecontent: "",
        },
        // 新增校验
        rules: {
          waysend: [{
            required: true,
            message: '请选择发送方式',
            trigger: 'blur'
          }, ],
          templatetype: [{
            required: true,
            message: '请选择模板类型',
            trigger: 'blur'
          }, ],
          businesstypes: [{
            required: true,
            message: '请选择业务类型',
            trigger: 'blur'
          }, ],
          state: [{
            required: true,
            message: '请选择状态',
            trigger: 'blur'
          }, ],
          templateName: [{
            required: true,
            message: '请输入模板名称',
          }, ],
          templatecontent: [{
            required: true,
            message: '请输入模板内容',
          }, ],
        },
        dialogVisible: false,
        // 分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // 表格数据
        Querydata: [],
        form: {
          templateName: "",
          createTimeBack: "",
          createDate: ""
        }
      }
    },
    methods: {
      // 查询按钮
      querybutton() {
        this.getsmsTemplateList()
      },
      // 查新接口
      getsmsTemplateList() {
        localStorage.setItem("isToken", true);
        this.$axios.getsmsTemplateList({
          templateName: this.form.templateName,
          createDate: this.form.createDate,
          createTimeBack: this.form.createTimeBack,
          employeeType: "",
          busType: "",
          status: "",
          templateContent: "",
          templateType: "",
          sendMeans: ""
        }).then((res) => {
          
          console.log(res)
          this.Querydata = res.data
          this.pageTotal = res.total
        })
      },
      // 新增按钮
      message() {
        this.ruleForm = {}
        this.dialogVisible = true
      },
      // 新增接口
      gettemplateadd() {
        localStorage.setItem("isToken", true);
        this.$axios.gettemplateadd({
          sendMeans: this.ruleForm.waysend,
          templateType: this.ruleForm.templatetype,
          templateName: this.ruleForm.templateName,
          templateContent: this.ruleForm.templatecontent,
          status: this.ruleForm.status,
          busType: this.ruleForm.businesstypes,
          // sendMeans:this.ruleForm.waysend,

        }).then((res) => {
          
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.dialogVisible = false,
              this.getsmsTemplateList()

          }
        })
      },
      // 新增确认按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.gettemplateadd()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 修改按钮
      messageModify(row) {
        console.log(row)
        this.dialogVisible = true
        this.getgetTemplate(row.smsTemplateId)
      },
      getgetTemplate(id) {
        this.$axios.getgetTemplate({
          id: id
        }).then((res) => {
          console.log(res)
          this.ruleForm = res.data
          this.waysend = res.sendMeans
          // 新增表单
          // ruleForm: {
          //   // 发送方式
          //   waysend: "",
          //   // 模板类型
          //   templatetype: "",
          //   // 业务类型
          //   businesstypes: "",
          //   // 状态
          //   state: "",
          //   // 模板名称
          //   templateName: "",
          //   // 模板内容
          //   templatecontent: "",

          // },
        })
      },
      // 删除按钮
      messagedelete(row) {
        console.log(row.smsTemplateId)
        this.smsTemplateId = row.smsTemplateId
        this.dialogVisibleremove = true
      },
      // 删除接口
      gettemplateremove() {
        this.$axios.gettemplateremove({
          id: this.smsTemplateId
        }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.dialogVisibleremove = false,
              this.getsmsTemplateList()
          }
        })
      },
      // 删除确认按钮
      submitFormremove() {
        this.gettemplateremove()
      },
      // 分页 
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getsmsTemplateList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getsmsTemplateList();
        // orders = res.data;
      },
    },
    mounted() {
      this.getsmsTemplateList()
    },
  }
</script>

<style scoped>
  .messagetemplate {
    margin: 20px;
  }
</style>